import React from "react"
import { Tabs, Icon } from "antd-mobile"
import "./style/index.scss"
import { images } from "../../../assets"
import NoneData from "./compontes/NoneData"

const tabs = [
  { title: "今天", param: "1" },
  { title: "昨天", param: "2" },
  { title: "七天内", param: "3" }
]

// 卡片组件
function CardItem(props: any) {
  function formatInteger(num: any) {
    return parseInt(num)
  }
  function formatDecimal(num: any) {
    let newNum = num.toFixed(2) // 四舍五入 or 舍去小数后面 ?
    let intNum = parseInt(num)
    let outNum = Number((newNum - intNum).toFixed(2)) * 100
    return outNum
  }
  return (
    <div className="card">
      <div className="card-header">
        <span className="left-title">{props.League}</span>
        <span className="right-title">
          详情
          <Icon type="right" />
        </span>
      </div>
      <div className="hr"></div>
      <div className="game-info">
        <div className="home-team info-view-item">
          <span>
            {props.homeTeam}-{props.rate}
          </span>
          <span className="theme-color">@{props.rate}</span>
        </div>
        <div className="info-view-item">
          <span>
            滚球 让球（{props.homeScore}:{props.gusetScore}}）
          </span>
          <span></span>
        </div>
        <div className="info-view-item">
          <span>
            {props.homeTeam} v {props.guestTeam}
          </span>
          <span></span>
        </div>
        <div className="info-view-item">
          <span>
            本金
            <span className="money">
              <small> $</small>
              {formatInteger(props.principal)}.<small>{formatDecimal(props.principal)}</small>
            </span>
          </span>
          <span>
            返还
            <span className="money">
              <small> $</small>
              {formatInteger(props.principal * props.rate)}.
              <small>{formatDecimal(props.principal * props.rate)}</small>
            </span>
          </span>
        </div>
        <div className="match-result lose">输</div>
        <div className="match-result tie">和</div>
        <div className="match-result win">
          <img src={images.mine.betRecord.winGame} alt="binggo" />
        </div>
        <div className="match-result win">
          <img src={images.mine.betRecord.winHalfGame} alt="binggo" />
        </div>
      </div>
    </div>
  )
}

// 数据总览组件

function DataOverview(props: any) {
  return (
    <div className="overview">
      总计 {props.data} 单, 有效流水 {props.data} 元, 输赢
      <span className="color-danger">{props.data}</span> 元
    </div>
  )
}

export interface SettlementedScreenProps {}
export interface SettlementedScreenState {
  tempData: any[]
}

class SettlementedScreen extends React.Component<SettlementedScreenProps, SettlementedScreenState> {
  state = {
    tempData: [
      {
        gameId: "1",
        homeTeam: "奥后小鹰",
        League: "澳大利亚维多利亚国家超级联赛",
        guestTeam: "中国大象",
        rate: 1.8,
        principal: 1222.027223123,
        state: 1,
        homeScore: 0,
        gusetScore: 2
      },
      {
        gameId: "1",
        homeTeam: "奥后小鹰",
        League: "澳大利亚维多利亚国家超级联赛",
        guestTeam: "中国大象",
        rate: 0.8,
        principal: 12.0,
        state: 1,
        homeScore: 0,
        gusetScore: 2
      },
      {
        gameId: "1",
        homeTeam: "奥后小鹰",
        League: "澳大利亚维多利亚国家超级联赛",
        guestTeam: "中国大象",
        rate: 0.8,
        principal: 12.0000212,
        state: 1,
        homeScore: 0,
        gusetScore: 2
      },
      {
        gameId: "1",
        homeTeam: "奥后小鹰",
        League: "澳大利亚维多利亚国家超级联赛",
        guestTeam: "中国大象",
        rate: 0.8,
        principal: 12.2123232,
        state: 1,
        homeScore: 0,
        gusetScore: 2
      },
      {
        gameId: "1",
        homeTeam: "奥后小鹰",
        League: "澳大利亚维多利亚国家超级联赛",
        guestTeam: "中国大象",
        rate: 0.8,
        principal: 13,
        state: 1,
        homeScore: 0,
        gusetScore: 2
      }
    ]
  }
  render() {
    return (
      <div className="record-list">
        <div className="record-fliter" onClick={() => alert("筛选")}>
          <Icon type="check" />
          <span>筛选</span>
        </div>
        <Tabs tabs={tabs}>
          <div className="item">
            <DataOverview data="30" />
            {this.state.tempData.map((item, index) => {
              return <CardItem key={index} {...item} />
            })}
            {this.state.tempData.length === 0 ? <NoneData /> : null}
          </div>
          <div className="item">Content of second tab</div>
          <div className="item">Content of third tab</div>
        </Tabs>
      </div>
    )
  }
}

export default SettlementedScreen
